<template>
  <div class="customer-container">
    <!-- 搜索工作栏 -->
    <ContentWrap class="search-wrapper">
      <!-- 搜索头部 -->
      <div class="search-header">
        <div class="header-icon">
          <Icon icon="ep:user" />
        </div>
        <div class="header-content">
          <h3 class="search-title">客户管理</h3>
          <p class="search-subtitle">管理企业微信客户信息和跟进记录</p>
        </div>
      </div>

      <!-- 搜索表单 -->
      <div class="search-form-container">
        <el-form
          :model="queryParams"
          ref="queryFormRef"
          :inline="true"
          label-width="100px"
          label-position="left"
          class="enhanced-search-form"
        >
          <div class="form-grid">
            <el-form-item label="客户名称" prop="name" class="form-item">
              <el-input
                v-model="queryParams.name"
                placeholder="请输入客户名称"
                clearable
                @keyup.enter="handleQuery"
                class="enhanced-input"
              >
                <template #prefix>
                  <Icon icon="ep:user" />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item label="客户类型" prop="type" class="form-item">
              <el-select
                v-model="queryParams.type"
                placeholder="请选择客户类型"
                clearable
                class="enhanced-select"
              >
                <template #prefix>
                  <Icon icon="ep:collection-tag" />
                </template>
                <el-option label="微信用户" value="2">微信用户</el-option>
                <el-option label="企业微信用户" value="1">企业微信用户</el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="创建时间" prop="createTime" class="form-item">
              <el-date-picker
                v-model="queryParams.createTime"
                value-format="YYYY-MM-DD HH:mm:ss"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
                class="enhanced-date-picker"
              />
            </el-form-item>
          </div>

          <div class="form-actions">
            <el-button @click="handleQuery" class="search-btn">
              <Icon icon="ep:search" class="btn-icon" />
              搜索
            </el-button>
            <el-button @click="resetQuery" class="reset-btn">
              <Icon icon="ep:refresh" class="btn-icon" />
              重置
            </el-button>
            <el-button
              type="success"
              plain
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['wecom:we-customer:export']"
              class="export-btn"
            >
              <Icon icon="ep:download" class="btn-icon" />
              导出
            </el-button>
            <el-button type="primary" plain @click="handleSyncUser" style="border-radius: 6px">
              <Icon icon="ep:switch" class="btn-icon" />
              同步企微客户
            </el-button>
          </div>
        </el-form>
      </div>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap class="table-wrapper">
      <!-- 表格头部 -->
      <div class="table-header">
        <div class="header-icon">
          <Icon icon="ep:list" />
        </div>
        <div class="header-content">
          <h4 class="table-title">客户列表</h4>
          <p class="table-subtitle">共 {{ total }} 个客户</p>
        </div>
      </div>

      <!-- 表格容器 -->
      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="list"
          :stripe="true"
          class="enhanced-table"
          :header-cell-style="{ background: '#f8f9ff', color: '#303133', fontWeight: '600' }"
        >
          <el-table-column label="客户名称" align="center" prop="name" min-width="180">
            <template #default="scope">
              <div class="customer-name-cell">
                <div class="customer-type-icon">
                  <span v-if="scope.row.type == 1" class="type-icon wework-icon">
                    <svg
                      t="1721110751169"
                      class="icon"
                      viewBox="0 0 1229 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="8691"
                    >
                      <path
                        d="M702.72 849.92c-76.8 30.72-158.72 35.84-240.64 30.72-35.84-5.12-71.68-10.24-107.52-20.48-5.12 0-10.24 0-15.36 5.12-46.08 20.48-92.16 46.08-133.12 66.56-15.36 10.24-30.72 10.24-46.08 0s-15.36-25.6-15.36-46.08c10.24-35.84 10.24-71.68 15.36-107.52 0-5.12-5.12-10.24-5.12-15.36-51.2-51.2-92.16-102.4-122.88-168.96-51.2-122.88-40.96-245.76 30.72-358.4C134.4 112.64 247.04 46.08 380.16 15.36S641.28 0 764.16 61.44c112.64 56.32 194.56 143.36 230.4 266.24 15.36 46.08 20.48 92.16 15.36 138.24-25.6-25.6-56.32-30.72-87.04-15.36 0-30.72 0-61.44-10.24-92.16-20.48-71.68-61.44-128-112.64-174.08-87.04-71.68-194.56-102.4-307.2-102.4-117.76 10.24-220.16 51.2-302.08 133.12-66.56 66.56-102.4 148.48-97.28 245.76 5.12 81.92 40.96 148.48 92.16 204.8l40.96 40.96c20.48 15.36 25.6 30.72 15.36 51.2-5.12 20.48-10.24 46.08-15.36 66.56 0 5.12-5.12 10.24 0 10.24 5.12 5.12 10.24 0 10.24 0 25.6-15.36 56.32-30.72 81.92-51.2 15.36-10.24 30.72-10.24 51.2-5.12 87.04 25.6 179.2 25.6 266.24 0 5.12 0 10.24-5.12 10.24 5.12 10.24 30.72 25.6 51.2 56.32 66.56z"
                        fill="#0082EF"
                        p-id="8692"
                      ></path>
                      <path
                        d="M1214.72 747.52c0 35.84-25.6 61.44-56.32 66.56-51.2 10.24-92.16 30.72-128 66.56-10.24 10.24-15.36 10.24-25.6 5.12-5.12-5.12-5.12-15.36 0-25.6 35.84-35.84 56.32-81.92 66.56-128 5.12-35.84 40.96-56.32 76.8-56.32 40.96 5.12 66.56 35.84 66.56 71.68z"
                        fill="#0081EE"
                        p-id="8693"
                      ></path>
                      <path
                        d="M953.6 1024c-35.84 0-66.56-25.6-71.68-56.32-5.12-51.2-30.72-92.16-66.56-122.88-5.12-5.12-10.24-10.24-5.12-20.48 5.12-15.36 15.36-15.36 25.6-10.24 10.24 5.12 15.36 15.36 20.48 20.48 30.72 25.6 66.56 40.96 102.4 46.08 35.84 5.12 61.44 40.96 56.32 76.8 5.12 35.84-25.6 66.56-61.44 66.56z"
                        fill="#FA6202"
                        p-id="8694"
                      ></path>
                      <path
                        d="M682.24 757.76c0-35.84 20.48-61.44 56.32-71.68 51.2-10.24 92.16-30.72 128-66.56 10.24-10.24 20.48-10.24 25.6 0 5.12 5.12 5.12 15.36-5.12 25.6-30.72 30.72-51.2 66.56-61.44 112.64 0 5.12 0 15.36-5.12 20.48-10.24 35.84-40.96 56.32-76.8 51.2-35.84-5.12-61.44-35.84-61.44-71.68z"
                        fill="#FECD00"
                        p-id="8695"
                      ></path>
                      <path
                        d="M1035.52 578.56c15.36 30.72 30.72 56.32 51.2 76.8 10.24 10.24 10.24 20.48 5.12 25.6-5.12 10.24-15.36 10.24-25.6 0-25.6-30.72-61.44-51.2-97.28-61.44-10.24-5.12-20.48-5.12-30.72-5.12-20.48-5.12-40.96-15.36-46.08-40.96-10.24-25.6-10.24-51.2 10.24-71.68 20.48-25.6 46.08-30.72 71.68-25.6 25.6 10.24 46.08 25.6 51.2 56.32 0 15.36 5.12 30.72 10.24 46.08z"
                        fill="#2CBD00"
                        p-id="8696"
                      ></path>
                    </svg>
                  </span>
                  <span v-if="scope.row.type == 2" class="type-icon wechat-icon">
                    <svg
                      t="1721110793630"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="9756"
                    >
                      <path
                        d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                        fill="#28C445"
                        p-id="9757"
                      ></path>
                      <path
                        d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                        fill="#28C445"
                        p-id="9758"
                      ></path>
                    </svg>
                  </span>
                </div>
                <div class="customer-info">
                  <span @click="goDetail(scope.row)" class="customer-name">
                    {{ scope.row.name }}
                  </span>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="所在群聊" align="center" prop="chatGroupList" min-width="150">
            <template #default="scope">
              <div class="chat-group-cell">
                <span
                  @click="showChatGroupList(scope.row.chatGroupList)"
                  class="chat-group-link"
                  v-if="scope.row.chatGroupList.length > 1"
                >
                  <Icon icon="ep:chat-dot-round" class="chat-icon" />
                  {{ scope.row.chatGroupList[0]?.name }}等{{ scope.row.chatGroupList.length }}个群聊
                </span>
                <span
                  @click="showChatGroupList(scope.row.chatGroupList)"
                  class="chat-group-link"
                  v-if="scope.row.chatGroupList.length <= 1"
                >
                  <Icon icon="ep:chat-dot-round" class="chat-icon" />
                  {{ scope.row.chatGroupList[0]?.name || '-' }}
                </span>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="客户所在企业"
            align="center"
            prop="corpName"
            show-overflow-tooltip
            min-width="150"
          />

          <el-table-column
            label="客户所在企业主体"
            align="center"
            prop="corpFullName"
            show-overflow-tooltip
            min-width="180"
          />

          <el-table-column label="客户职位" align="center" prop="positionName" min-width="120" />

          <el-table-column label="跟进人" min-width="660">
            <template #default="scope">
              <div class="follow-user-container">
                <el-table
                  border
                  :data="scope.row.followUserList"
                  :header-cell-style="{
                    background: '#f8f9ff',
                    color: '#303133',
                    fontWeight: '600'
                  }"
                  class="nested-table"
                >
                  <el-table-column prop="userNickname" label="跟进人姓名" show-overflow-tooltip />
                  <el-table-column prop="remark" label="客户备注" show-overflow-tooltip />
                  <el-table-column
                    prop="remarkMobiles"
                    label="备注的手机号"
                    show-overflow-tooltip
                  />
                  <el-table-column prop="description" label="客户描述" show-overflow-tooltip />
                  <el-table-column label="跟进时间" align="center" prop="createTime" width="170px">
                    <template #default="scope">
                      <div class="time-cell">
                        <Icon icon="ep:clock" class="time-icon" />
                        <span>{{ formatDate(scope.row.createTime) }}</span>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="scope">
              <div class="action-buttons">
                <el-button
                  v-if="scope.row.customerStatus != 1"
                  type="primary"
                  size="small"
                  @click="transformCrm(scope.row)"
                  link
                  class="transform-btn"
                >
                  <Icon icon="ep:refresh" class="btn-icon" />
                  转客户
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </ContentWrap>

    <!-- 表单弹窗：添加/修改 -->
    <WeCustomerForm ref="formRef" @success="getList" />
    <DetailDrawer ref="detailRef" />

    <!-- 群聊列表弹窗 -->
    <Dialog
      v-model="chatDialogVisible"
      title="群聊列表"
      width="1200"
      :lock-scroll="false"
      class="enhanced-dialog"
    >
      <div class="dialog-table-container">
        <el-table
          border
          :header-cell-style="{ background: '#f8f9ff', color: '#303133', fontWeight: '600' }"
          :data="chatTableData"
          stripe
          max-height="600"
          class="dialog-table"
        >
          <el-table-column label="群聊名称" align="center" prop="name" width="180" />
          <el-table-column label="群主" align="center" prop="owner" />
          <el-table-column label="群公告" align="center" prop="notice" />
          <el-table-column label="上次聊天时间" align="center" prop="lastChatTime" width="150px" />
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            width="180px"
            :formatter="dateFormatter"
          />
        </el-table>
      </div>
    </Dialog>

    <!-- 企微详情 -->
    <CustomerForm ref="customerForm" @success="bindCustomer" />
    <!-- crm客户详情 -->
    <!-- 详情弹窗 -->
    <CrmSpec ref="crmSpec" @getPage="handleQuery" />
  </div>
</template>

<script setup lang="ts">
import download from '@/utils/download'
import * as WeCustomerApi from '@/api/wecom/customer'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import WeCustomerForm from './WeCustomerForm.vue'
import DetailDrawer from './DetailDrawer.vue'
import CustomerForm from '@/views/crm/customer/CustomerForm.vue'

defineOptions({ name: 'WeCustomer' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const customerForm = ref(null)
const crmSpec = ref(null)
const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: null,
  type: null,
  gender: null,
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await WeCustomerApi.getWeCustomerPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await WeCustomerApi.deleteWeCustomer(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await WeCustomerApi.exportWeCustomer(queryParams)
    download.excel(data, '企微客户.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 同步企微员工 */
const handleSyncUser = async () => {
  const data = await WeCustomerApi.syncUser()
  if (data) {
    message.success(t('同步成功!'))
    await getList()
  } else {
    message.error(t('同步有误'))
  }
}

const detailRef = ref()
const goDetail = (item) => {
  if (item.customerStatus == 1) {
    crmSpec.value.setDrawer(true, 'customer', item.customerId, [])
  } else {
    detailRef.value.open(true, item)
  }
}

const chatDialogVisible = ref(false)
const chatTableData = ref([])
const showChatGroupList = (list) => {
  chatDialogVisible.value = true
  chatTableData.value = list
}
const transformItem = ref(null)
/*转客户*/
const transformCrm = (item) => {
  transformItem.value = item
  customerForm.value.weComOpen('create', item)
}
/*企业微信转客户 之后绑定*/
const bindCustomer = async (customerId) => {
  let obj = {
    id: transformItem.value.id,
    customerStatus: 1,
    customerId: customerId
  }
  let data = await WeCustomerApi.bindCustomerApi(obj)
  getList()
}
/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.customer-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

/* 搜索区域样式 */
.search-wrapper {
  margin-bottom: 16px;
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.search-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.header-content {
  flex: 1;
  margin-left: 16px;

  @media (max-width: 768px) {
    margin-left: 0;
  }
}

.search-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 18px;
  }
}

.search-subtitle {
  font-size: 14px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.search-form-container {
  background: white;
  padding: 24px;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

.enhanced-search-form {
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;

    @media (max-width: 768px) {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  .form-item {
    margin-bottom: 0;

    :deep(.el-form-item__label) {
      font-weight: 500;
      color: $text-regular;
    }
  }
}

.enhanced-input,
.enhanced-select,
.enhanced-date-picker {
  width: 100%;

  :deep(.el-input__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;

  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.search-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  color: white;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.reset-btn {
  border: 2px solid $border-color;
  color: $text-regular;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    border-color: $primary-color;
    color: $primary-color;
    background: $primary-light;
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.export-btn {
  border: 2px solid $success-color;
  color: $success-color;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(103, 194, 58, 0.1);
    transform: translateY(-1px);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

.sync-btn {
  border: 2px solid $primary-color;
  color: $primary-color;
  border-radius: $border-radius-small;
  padding: 10px 20px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: $primary-light;
    transform: translateY(-1px);
  }

  @media (max-width: 768px) {
    width: 100%;
  }

  .btn-icon {
    margin-right: 6px;
  }
}

/* 表格区域样式 */
.table-wrapper {
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.table-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
  }

  .header-icon {
    width: 40px;
    height: 40px;
    background: $primary-color;
    border-radius: $border-radius-small;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;

    @media (max-width: 768px) {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
  }

  .header-content {
    flex: 1;
    margin-left: 12px;

    @media (max-width: 768px) {
      margin-left: 10px;
    }
  }

  .table-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin: 0 0 2px 0;

    @media (max-width: 768px) {
      font-size: 14px;
    }
  }

  .table-subtitle {
    font-size: 13px;
    color: $text-secondary;
    margin: 0;

    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
}

.table-container {
  background: white;
  overflow-x: auto;
}

.enhanced-table {
  :deep(.el-table__header) {
    th {
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
      color: $text-primary !important;
      font-weight: 600 !important;
      border-bottom: 2px solid $primary-light;
      padding: 16px 12px;
    }
  }

  :deep(.el-table__body) {
    tr {
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light !important;
      }

      td {
        padding: 14px 12px;
        border-bottom: 1px solid $border-light;
      }
    }

    .el-table__row--striped {
      background: #fafbff;

      &:hover {
        background: $primary-light !important;
      }
    }
  }

  // H5适配
  @media (max-width: 768px) {
    :deep(.el-table__header) th {
      padding: 12px 8px;
      font-size: 13px;
    }

    :deep(.el-table__body) td {
      padding: 12px 8px;
      font-size: 12px;
    }
  }
}

/* 表格单元格样式 */
.customer-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;

  @media (max-width: 768px) {
    gap: 8px;
    flex-direction: column;
  }
}

.customer-type-icon {
  flex-shrink: 0;
}

.type-icon {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  padding: 4px;
  box-shadow: $shadow-base;
  transition: all 0.3s ease;

  @media (max-width: 768px) {
    width: 24px;
    height: 24px;
    padding: 3px;
  }

  .icon {
    width: 100%;
    height: 100%;
  }

  &.wework-icon {
    background: linear-gradient(135deg, #0082ef 0%, #2cbd00 100%);
  }

  &.wechat-icon {
    background: linear-gradient(135deg, #28c445 0%, #1aad19 100%);
  }
}

.customer-info {
  flex: 1;
  min-width: 0;
}

.customer-name {
  cursor: pointer;
  color: $primary-color;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  word-break: break-all;
  overflow-wrap: break-word;
  line-height: 1.4;

  &:hover {
    color: darken($primary-color, 10%);
    text-decoration: underline;
  }

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.chat-group-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-group-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: $primary-color;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s ease;
  font-size: 13px;

  &:hover {
    color: darken($primary-color, 10%);
    transform: scale(1.02);
  }

  @media (max-width: 768px) {
    font-size: 12px;
    gap: 4px;
  }
}

.chat-icon {
  font-size: 14px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.follow-user-container {
  padding: 8px;
  background: #fafbff;
  border-radius: $border-radius-small;
  border: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 4px;
  }
}

.nested-table {
  :deep(.el-table__header) {
    th {
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
      color: $text-primary !important;
      font-weight: 600 !important;
      padding: 12px 8px;
      font-size: 12px;
    }
  }

  :deep(.el-table__body) {
    tr {
      &:hover {
        background: $primary-light !important;
      }

      td {
        padding: 10px 8px;
        font-size: 12px;
      }
    }
  }

  @media (max-width: 768px) {
    :deep(.el-table__header) th {
      padding: 8px 4px;
      font-size: 11px;
    }

    :deep(.el-table__body) td {
      padding: 8px 4px;
      font-size: 11px;
    }
  }
}

.time-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  font-size: 12px;
  color: $text-secondary;

  @media (max-width: 768px) {
    font-size: 11px;
  }
}

.time-icon {
  color: $text-secondary;
  font-size: 12px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    font-size: 10px;
  }
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.transform-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;

  &:hover {
    background: $primary-light;
    transform: scale(1.05);
  }

  .btn-icon {
    font-size: 12px;
  }
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  background: white;
  border-top: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px;
  }

  :deep(.el-pagination) {
    .el-pager li {
      border-radius: 6px;
      margin: 0 2px;
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }

      &.is-active {
        background: $primary-color;
        color: white;
      }
    }

    .btn-prev,
    .btn-next {
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        background: $primary-light;
        color: $primary-color;
      }
    }

    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

/* 弹窗样式 */
.enhanced-dialog {
  :deep(.el-dialog) {
    border-radius: $border-radius;
    overflow: hidden;
  }

  :deep(.el-dialog__header) {
    background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
    color: white;
    padding: 20px 24px;
  }

  :deep(.el-dialog__title) {
    color: white;
    font-weight: 600;
  }

  :deep(.el-dialog__headerbtn) {
    .el-dialog__close {
      color: white;
      font-size: 18px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  :deep(.el-dialog__body) {
    padding: 0;
  }
}

.dialog-table-container {
  background: white;
  overflow-x: auto;
}

.dialog-table {
  :deep(.el-table__header) {
    th {
      background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%) !important;
      color: $text-primary !important;
      font-weight: 600 !important;
      border-bottom: 2px solid $primary-light;
    }
  }

  :deep(.el-table__body) {
    tr {
      &:hover {
        background: $primary-light !important;
      }
    }
  }
}

/* 通用样式 */
.text-overflow-2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.break-word {
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 响应式优化 */
@media (max-width: 480px) {
  .customer-container {
    padding: 4px;
  }

  .search-form-container {
    padding: 12px;
  }

  .form-actions {
    gap: 8px;

    .el-button {
      padding: 8px 12px;
      font-size: 13px;
    }
  }

  .enhanced-table {
    :deep(.el-table__header) th {
      padding: 10px 6px;
      font-size: 12px;
    }

    :deep(.el-table__body) td {
      padding: 10px 6px;
      font-size: 11px;
    }
  }

  .customer-name-cell {
    gap: 6px;
  }

  .type-icon {
    width: 20px;
    height: 20px;
    padding: 2px;
  }

  .pagination-wrapper {
    padding: 12px;
  }
}

/* 加载状态优化 */
:deep(.el-loading-mask) {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);

  .el-loading-spinner {
    .path {
      stroke: $primary-color;
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .customer-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .search-wrapper,
  .table-wrapper {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .search-form-container,
  .table-container,
  .pagination-wrapper {
    background: #374151;
  }

  .table-header {
    background: #4b5563;
    border-color: #6b7280;
  }

  .search-title,
  .table-title {
    color: #f9fafb;
  }

  .customer-name {
    color: #60a5fa;

    &:hover {
      color: #93c5fd;
    }
  }

  .chat-group-link {
    color: #60a5fa;

    &:hover {
      color: #93c5fd;
    }
  }

  .enhanced-table {
    :deep(.el-table__header) {
      th {
        background: #4b5563 !important;
        color: #f9fafb !important;
        border-bottom-color: #6b7280;
      }
    }

    :deep(.el-table__cell) {
      border-bottom-color: #4b5563;
    }
  }

  .follow-user-container {
    background: #4b5563;
    border-color: #6b7280;
  }

  .nested-table {
    :deep(.el-table__header) {
      th {
        background: #4b5563 !important;
        color: #f9fafb !important;
      }
    }
  }

  .dialog-table-container {
    background: #374151;
  }

  .dialog-table {
    :deep(.el-table__header) {
      th {
        background: #4b5563 !important;
        color: #f9fafb !important;
        border-bottom-color: #6b7280;
      }
    }
  }
}
</style>
